<!--
 * @Description: Markdown编辑器 使用vditor第三方工具
 * @Author: 梁晓雨
 * @Date: 2025-02-09 15:23:01
-->
<template>
    <div>
        <div ref="vditorRef"></div>
        <button @click="getContent">获取内容</button>
        <button @click="setContent">设置内容</button>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Vditor from 'vditor';
import 'vditor/dist/index.css';

// 创建一个 ref 来引用 DOM 元素
const vditorRef = ref(null);
let vditorInstance;

// 在组件挂载后初始化 Vditor
onMounted(() => {
    vditorInstance = new Vditor(vditorRef.value, {
        height: 360,
        toolbarConfig: {
            pin: true,
        },
        cache: {
            enable: false,
        },
        after: () => {
            vditorInstance.setValue('hello, Vditor + Vue!');
        },
    });
});

// 获取内容的方法
const getContent = () => {
    if (vditorInstance) {
        const content = vditorInstance.getValue();
        console.log(content);
    }
};

// 设置内容的方法
const setContent = () => {
    if (vditorInstance) {
        vditorInstance.setValue('新的内容');
    }
};

// 返回编辑器的内容
const returnContent = () => {
    if (vditorInstance) {
        const content = vditorInstance.getValue();
        return content;
    }
}
// 返回编辑器的纯文本内容
const returnContentText = () => {
    if (vditorInstance) {
        const content = vditorInstance.getValue();
        const pureText = content.replace(/[\*\_\#\!\-\+\=\[\]\(\)\>\`]/g, '');  // 移除 Markdown 格式标记
        return pureText;
    }
} 
/**
 * @description: 改变编辑器内容
 * @Author: 梁晓雨
 * @Date: 2025-03-04 22:20:09
 * @param `text:string` 编辑器的新内容
 */
const contentChange = (text) => {
    if(vditorInstance){
        vditorInstance.setValue(text)
    }
}

defineExpose({
    returnContent,
    returnContentText,
    contentChange
})
</script>

<style lang="scss" scoped>
@use './BlogEditorMarkdown.scss';
</style>
